<template>
  <div class="group-operation" v-if="!getIsPhone">
    <div class='billboard-wrapper'>
      <bill-board>
        <div class="billboard-content">
          <div class="item border-right">
            <div class="title">充值</div>
            <div class="recharge statistics">
            <span><span>+</span>{{1234}}</span>
            <span class="extra">.00</span>
            </div>
          </div>
          <div class="item">
            <div class="title">提现</div>
            <div class="withdraw statistics">
              <span><span>-</span>1122</span>
              <span class="extra">.00</span>
            </div>
          </div>
        </div>
      </bill-board>
    </div>
    <div class="table-wrapper">
      <ul>
        <li class="formHead">
          <span class="account-name">用户名</span>
          <span class="orderNumber">单号</span>
          <span class="changeTime">账变时间</span>
          <span class="changeType">账变类型</span>
          <span class="changeMoney">账变金额</span>
          <span class="changedMoney">账变后金额</span>
          <span class="nowStatus">当前状态</span>
          <span class="tip">备注</span>
        </li>
        <li v-for="(item,index) in allData" :key="index">
          <span class="account-name">{{item.accountName}}</span>
          <span class="orderNumber">{{ item.id }}</span>
          <span class="changeTime">{{ item.time | formater }}</span>
          <span class="changeType">{{ item.type }}</span>
          <span class="changeMoney" :class="item.amount>=0?'red':'green'"><span :class="item.amount > 0 ?'red':'green'" v-if="item.amount>=0">+</span>{{ item.amount }}</span>
          <span class="changedMoney">{{ item.balance }}</span>
          <span class="nowStatus">{{ item.status }}</span>
          <span class="tip" v-if="item.note">{{ item.note }}</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="group-operation" v-else>
    <div class='billboard-wrapper'>
      <bill-board>
        <div class="billboard-content">
          <div class="item border-right">
            <div class="title">充值</div>
            <div class="recharge statistics">
            <span><span>+</span>{{1234}}</span>
            <span class="extra">.00</span>
            </div>
          </div>
          <div class="item">
            <div class="title">提现</div>
            <div class="withdraw statistics">
              <span><span>-</span>1122</span>
              <span class="extra">.00</span>
            </div>
          </div>
        </div>
      </bill-board>
    </div>
    <div class="table-wrapper">
      <div class="table box-shadow">
        <list-header 
          class="header-adjust"
          :dataList="dataListGroup"
          :selectedButton="selectedButton"
          @click="updateSelectedButton"
          >
          充提明细
        </list-header>
        <div class="list">
          <list-item-group 
            v-for="item in currentData" 
            :key="item.id" 
            :item="item"
            @click="checkDetail"
          ></list-item-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BillBoard from '@/components/base/bill-board/bill-board'
import ListHeader from './list-header'
import ListItemGroup from './list-item-group'
import { mapGetters } from 'vuex'
export default {
  components: {
    BillBoard,
    ListHeader,
    ListItemGroup
  },
  data() {
    return {
      dataType: '收入',
      // 当前展示的数据为全部
      selectedButton: '全部',
      // 全部数据
      allData: [
        {
          id: 'DD111',
          type: '个人充值',
          amount: 100,
          balance: 100,
          accountName: 'VIP888',
          time: new Date().getTime() - 100 * 3600 * 1000,
          status: '充值成功'
        },
        {
          id: 'DDD222',
          type: '系统扣款',
          amount: -1000,
          balance: 100,
          accountName: 'QQ6767',
          time: new Date().getTime() - 99 * 3600 * 1000,
          status: '扣款成功'
        },
        {
          id: 'DDD333',
          type: '系统充值',
          amount: 100,
          balance: 100,
          accountName: 'VIP9090',
          time: new Date().getTime() - 98 * 3600 * 1000,
        },
        {
          id: 'DDD444',
          type: '个人充值',
          amount: 100,
          balance: 100,
          accountName: '978kkk',
          time: new Date().getTime() - 97 * 3600 * 1000,
        },
        {
          id: 'DDD555',
          type: '系统扣款',
          amount: -100,
          balance: 100,
          accountName: 'KK2312',
          time: new Date().getTime() - 96 * 3600 * 1000,
        },
        {
          id: 'DDD666',
          type: '个人提现',
          amount: -100,
          balance: 100,
          accountName: 'VIP777',
          time: new Date().getTime() - 95 * 3600 * 1000,
        },
        {
          id: 'DDD777',
          type: '个人充值',
          amount: 100,
          balance: 100,
          accountName: 'VIp666',
          time: new Date().getTime() - 94 * 3600 * 1000,
        },
        {
          id: 'DDD888',
          type: '个人提现',
          amount: -100,
          balance: 100,
          accountName: 'VIP333',
          time: new Date().getTime() - 93 * 3600 * 1000,
        },
        {
          id: 'DDD999',
          type: '个人充值',
          amount: 100,
          balance: 100,
          accountName: 'VI555',
          time: new Date().getTime() - 92 * 3600 * 1000,
        },
        {
          id: 'DDD1010',
          type: '个人提现',
          amount: -1000,
          balance: 100,
          accountName: 'V7790',
          time: new Date().getTime() - 91 * 3600 * 1000,
        },
      ],
      // 团队充提/充提种类
      dataListGroup: [
        {
          id: 1, 
          name: '全部'
        },
        {
          id: 2, 
          name: '个人充值'
        },
        {
          id: 3, 
          name: '系统扣款'
        },
        {
          id: 4, 
          name: '系统充值',

        },
        {
          id: 5, 
          name: '申请提现'
        },
        {
          id: 6, 
          name: '拒绝提款'
        },
        {
          id: 7, 
          name: '成功提款'
        },
      ],
      
    }
  },
  created() {
    console.log(this.currentData)
  },
  methods: {
    updateSelectedButton(index) {
      this.selectedButton = this.dataListGroup[index].name
    },
    updateOptions(data) {
      this.dataType = data
      this.selectedButton = '全部'
    },
    checkDetail(id) {
      this.$router.push({path: '/account-update/member/detail/' + id})
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    currentData() {
      let data = []
      if (this.dataType == '收入') {
        switch(this.selectedButton) {
          case '全部':
            data = this.allData
            break;
          case '个人充值':
            data = this.putMoney
            break;
          case '购彩奖金':
            data = this.bonus
            break;
          case '彩票返点':
            data = this.lotteryRefund
            break;
        }
      } else {
        switch(this.selectedButton) {
          case '全部':
            data = this.allData
            break;
          case '提现':
            data = this.withdraw
            break;
          case '购彩':
            data = this.buyLottery
            break;
        }
      }
      return data 
    },
    // totalAmount() {
    //   let amount = 0
    //   this.currentData.forEach(item => {
    //     amount += item.amount
    //   })
    //   return amount
    // }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .billboard-wrapper >>> .bg-bar
      width 101% !important
    .billboard-wrapper
      box-sizing border-box 
      padding 15px 30px 10px 30px
      background $color-text-button 
      .billboard-content 
        display flex 
        padding 20px 0
        background $color-text-button
        .item  
          width 50% 
          text-align center
          .title 
            color $color-sub-grey
            margin-bottom 5px
          .statistics
            span 
              font-size 18px
              font-weight 700
            &.recharge 
              color $color-theme-red 
            &.withdraw
              color $color-primary-green
            .extra 
              font-size 12px
    .table-wrapper 
      ul
      width 1200px;
      list-style none;
      li
        height 39px;
        line-height 39px;
        border-bottom 1px solid #dbd3d3;
        span 
          display inline-block;
          text-align left;
          color #584844;
          font-size 14px;
          .red
              color red;
          .green
              color green;
        .red
          color red;
        .green
          color green;
        .account-name 
          width 100px
          margin-left 18px
        .orderNumber
          width 165px;
        .changeTime
            width 170px;
        .changeType
            width 115px;
        .changeMoney
            width 174px;
        .changedMoney
            width 114px;
        .nowStatus
            width 134px;
        .tip
            width 180px;
    .formHead
        background-color #e7e0dd;
        height 39px;
        line-height 39px;
        border-top 1px solid #dbd3d3;
  @media screen and (max-width 750px)
    .group-operation 
      .table-wrapper
        box-shadow 0 -2px 6px #ccc 
        // border 1px solid green 
        margin-top 5px 
        box-sizing border-box 
        padding 10px
        .table 
          border-radius 3px 
          background $color-text-button
          .header-adjust  >>> .contents 
            .content 
              &:last-child 
                margin-left 0 
      .billboard-wrapper
        box-sizing border-box 
        padding 0 10px
      .billboard-content 
        display flex 
        padding 20px 0
        background $color-text-button
        .item  
          width 50% 
          text-align center
          .title 
            color $color-sub-grey
            margin-bottom 5px
          .statistics
            &.recharge 
              color $color-theme-red 
            &.withdraw
              color $color-primary-green
            .extra 
              font-size 12px

</style>